<template>
  <div class="center">
    <my-header
      title="新增订单"
      v-bind:showdata="showdata"
      v-bind:showbtn="showbtn"
    />
    <div class="data" id="xinzengdingdan_main"></div>
  </div>
</template>
    <script>
import * as echarts from "echarts";
import myheader from "./myheader";

export default {
  components: {
    "my-header": myheader,
  },
  name: "xinzengdingdan",
  data() {
    return {
      showdata: false,
      showbtn: false,
    };
  },
  mounted() {
    this.drawBar();
  },
  methods: {
    drawBar() {
      let chartDom = document.getElementById("xinzengdingdan_main");
      let myChart = echarts.init(chartDom, "dark");
      let option;

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "2%",
          right: "3%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          min: 0,
          max: 300,
        },
        yAxis: {
          type: "category",
          data: ["SA3H", "SA3E", "SA2H", "HDE", "HA2H", "HA2E"],
          axisTick: {
            alignWithLabel: true,
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            barWidth: "25%",
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(20, 50, 119, 0.9)",
                    },
                    {
                      offset: 1,
                      color: "rgba(214, 232, 255, 1)",
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
    <style  scoped>
.center {
  width: 100%;
  height: 100%;
}
.data {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: rgb(10, 19, 43);
  border: 1px solid rgb(85, 125, 219);
}
</style>
    